<template>
  <div class="task-item" :class="{
    'task-item--active': active,
    'task-item--expand': expand,
  }" @click="handleSelect" >
    <div class="row">
      <div class="col status">
        <!-- <img src="@/assets/home/task-success.png" v-if="task.run_status == 1" />
        <img src="@/assets/home/task-fail.png" v-else-if="task.run_status == 0" /> -->
      </div>
      <div class="order col col--center" @click.stop="handleExtend">
        {{ task.place_ratio.toFixed(1) * 100 }}%
        <el-icon class="icon">
          <CaretTop v-if="expand" />
          <CaretBottom v-else />
        </el-icon>
      </div>
      <div class="col" :title="task.task_name">
        <span v-if="task.run_status == 0 && task.order_list.length > 0" style="color: #feac2e">预约中</span>
        <span v-if="task.run_status == 1 || (task.run_status == 0 && task.order_list.length == 0)"
          style="color: #3711d8">下单中</span>
        <span v-if="task.run_status == 2" style="color: #1cc535">已完成</span>
        <span v-if="task.run_status == 3" style="color: #ff5f58">已取消</span>
      </div>
      <!-- <div class="col col--center"
        v-if="store.task.taskType == '_copy_order_hand' || store.task.taskType == '_copy_order_auto'">
        {{ platformObj[task.from_bc_type]?.name || task.from_bc_type }}
      </div>
      <div class="col col--center"
        v-if="store.task.taskType == '_copy_order_hand' || store.task.taskType == '_copy_order_auto'">
        {{ task.agent_account }}
      </div>
      <div class="col col--center"
        v-if="store.task.taskType == '_copy_order_hand' || store.task.taskType == '_copy_order_auto'">
        {{ task.member }}
      </div> -->
      <div class="col" :title="task.minfo?.league_name">{{ task.minfo?.league_name }}</div>
      <div class="col col--center">{{ task.minfo?.home_name }}</div>
      <div class="col col--center">{{ task.minfo?.away_name }}</div>
      <div class="col col--center">{{ task.total_stake }}</div>

      <!-- <div class="col col--center">{{ task.work_source }}</div> -->
      <div class="col col--center">{{ task.uid }}</div>
      <!-- v-if="store.task.taskType == '_reservation_order' || store.task.taskType == '_place_order'" -->
      <div class="col chakanicon" style="display: flex; align-items: center">
        <template v-if="JSON.stringify(task.remark) != '{}'">
          <el-popover placement="right" :width="250" :show-after="200">
            <template #reference>
              <img style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/home/icon_chakan.png" />
            </template>
            <el-scrollbar max-height="400px">
              <div class="remark_content" v-for="(value, key) in task.remark" :key="key">
                <div class="remark_bctype">{{ key }}</div>
                <div class="list">
                  <div class="item" v-for="(item, index) in value" :key="index">{{ item }}</div>
                </div>
              </div>
            </el-scrollbar>
          </el-popover>
        </template>
        <template v-if="JSON.stringify(task.remark) == '{}'">
          <div style="width: 20px; height: 20px; margin-right: 8px"></div>
        </template>
        <img style="width: 20px; height: 20px" src="@/assets/del-default.png" @click.stop="savesetting(task)" />
      </div>
    </div>

    <el-scrollbar v-if="expand">
      <ReservationOrder v-if="store.task.taskType == '_reservation_order'" :task="task" />
      <Order v-else :task="task" />
    </el-scrollbar>

    <settingDialog v-model="settingdialog.show" :task="task" />
  </div>
</template>
<script setup>
const { store } = inject('/home')

import { http } from '@/utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import Order from './Order.vue'
import ReservationOrder from './ReservationOrder.vue'
import settingDialog from './components/settingDialog.vue'
import { onMounted } from 'vue'
const { platformObj } = inject('/home')

const emits = defineEmits(['expand', 'select'])
const props = defineProps({
  task: Object,
  active: Boolean,
  expand: Boolean,
})

const settingdialog = ref({
  show: false,
})

const handleExtend = () => {
  emits('expand', props.task)
}

const handleSelect = () => {
  emits('select', props.task)
}

const savesetting = task => {
  console.log('111111')
  console.log(task.task_code)
  let data = {
    task_code: task.task_code,
  }
  // settingdialog.value.show = true
  ElMessageBox.confirm('是否取消订单', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '关闭',
    type: 'warning',
  })
    .then(() => {
      http.post('/order/cancel_order_task', data).then(res => {
        ElMessage({
          type: 'success',
          message: '取消成功',
        })
      })
    })
    .catch(() => { })
}

onMounted(() => { })
</script>

<style lang="scss" scoped>
.row {
  display: flex;
}

.col {
  flex: 1;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}

.chakanicon {
  // width: 30px;
  flex: none;
  padding: 0;
}

.status {
  width: 20px;
  flex: none;
  padding-left: 12px;

  img {
    width: 8px;
    height: 32px;
  }
}

.col--center {
  text-align: center;
}

.task-item {
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s all;
}

.icon {
  transition: 0.3s all;
}

.task-item--active {
  background-color: #ecf6ff;

  .order {
    color: var(--primary);
  }
}

.task-item--expand {
  padding-bottom: 8px;
}

.order {
  cursor: pointer;
}

.remark_content {
  display: flex;
  flex-direction: column;

  .remark_bctype {
    margin-bottom: 4px;
    color: #333333;
    font-size: 12px;
    font-weight: bold;
  }

  .list {
    display: flex;
    flex-direction: column;

    .item {
      padding: 4px 0;
      color: #333333;
      font-size: 12px;
    }
  }
}
</style>
